<template>
    <div class="wrap">
        <div id="container">
            <!-- 定义一个表格元素 -->
            <!--<button id="redraw">更换数据源</button>-->
            <section class="detail-header">
                <div class="col-sm-12 console-title">
                    <h5 class=""><span class="title">类型配置</span></h5>
                    <div class="stayRight ">
                        <el-button type="primary" @click="showMonitor()">新增类型</el-button>
                    </div>
                </div>
            </section>
            <section class="tableMain">
                <el-table :data="dataArr" border style="width: 100%" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column prop="type" label="类型" > </el-table-column>
                    <el-table-column prop="title" label="标题" > </el-table-column>
                    <el-table-column prop="remark" label="备注" > </el-table-column>
                    <el-table-column label="操作">
                        <template scope="scope">
                            <el-button  size="small"  type="text"   @click="showMonitor(scope.$index, dataArr)">修改</el-button> |
                            <el-button  size="small"  type="text"   @click="deleteType(scope.$index, dataArr)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </section>


            <el-dialog :title="monitorTitle" :visible.sync="creatDialogVislble" class="customDialog team" :lock-scroll="false">
                <!-- <h4 class="dialogtitle">新增类型</h4> -->
                <div class="scoreContainer tagCategory">
                    <el-form :model="typeForm" :rules="rules" ref="typeForm" label-width="120px" class="demo-typeForm">
                        <el-form-item label="类型" prop="type">
                          <el-select v-model="typeForm.type" placeholder="请选择">
						    <el-option
						      v-for="item in options"
						      :key="item.value"
						      :label="item.label"
						      :value="item.value">
						    </el-option>
						  </el-select>
                        </el-form-item>
                        <el-form-item label="标题" prop="title">
                            <el-input v-model="typeForm.title"></el-input>
                        </el-form-item>
                        <el-form-item label="备注" prop="remark">
                            <el-input type="textarea" v-model="typeForm.remark"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="creatDialogVislble = false">取 消</el-button>
                    <el-button type="primary" @click="createSubmit('typeForm')">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import { typeList, modifyType, deleteType, queryMsgTypeByName } from '@/api/msgCenterData'
export default {
  data() {
    var titleValidate = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入标题'))
      } else {
        var listQuery = { name: value, id: this.typeForm.id }
        queryMsgTypeByName(listQuery).then(response => {
          var has = response.data.has
          if (has) {
            callback(new Error('标题已经存在'))
          } else {
            callback()
          }
        })
      }
    }
    return {
      dataArr: null,
      monitorTitle: '',
      listLoading: true,
      pdisabled: true,
      creatDialogVislble: false,
      multipleSelection: [],
      typeForm: {
        id: '',
        type: '',
        title: '',
        remark: ''
      },
      rules: {
        type: [
          { required: true, message: '请选择类型', trigger: 'change' }
        ],
        title: [
          { validator: titleValidate, required: true, trigger: 'blur' }
        ]
      },
      options: [{
        value: '警告消息',
        label: '警告消息'
      }, {
        value: '服务消息',
        label: '服务消息'
      }],
      type: ''
    }
  },
  created() {
    this.typeList()
  },
  methods: {
    typeList() {
      var listQuery = { }
      typeList(listQuery).then(response => {
        this.dataArr = response.data
      })
    },
    showMonitor(index, data) {
      this.creatDialogVislble = true
      if (data !== undefined) {
        this.monitorTitle = '修改'
        this.typeForm = {
          id: data[index].id,
          type: data[index].type,
          title: data[index].title,
          remark: data[index].remark
        }
      } else {
        this.monitorTitle = '新增类型'
        this.typeForm = {
          type: '',
          title: '',
          remark: ''
        }
      }
    },
    createSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var tip = '确认添加类型？'
          if (this.typeForm.id !== undefined) {
            tip = '确认修改？'
          }
          this.$confirm(tip, '提示', {
            type: 'warning'
          })
          .then(_ => {
            modifyType(this.typeForm).then(response => {
              this.creatDialogVislble = false
              this.typeList()
              this.$message({
                message: '操作成功!',
                type: 'success'
              })
            })
          })
        .catch(_ => {})
        }
      })
    },
    deleteType(index, data) {
      const sel = {
        id: data[index].id
      }
      this.$confirm('此操作将删除该数据, 是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteType(sel).then(response => {
          this.typeList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
      }).catch(() => {
      })
    },
    selectCheck() {
      if (this.ruleForm.type === 'HTTP') {
        console.log(this.qrRequired, 'HTTP')
        this.qrRequired = true
      } else if (this.ruleForm.type === 'TCP') {
        this.ptRequired = true
        this.qrRequired = false
      } else {
        this.qrRequired = false
        this.ptRequired = false
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      if (this.multipleSelection.length > 0) {
        this.pdisabled = false
      } else {
        this.pdisabled = true
      }
      console.log(this.multipleSelection, 'multipleSelection')
    }
  }
}
</script>

<style lang="scss">
.detail-header{
    padding: 0 15px;
    margin-bottom: 10px;
    overflow: hidden;
    .console-title{
        padding: 16px 0px;
        min-height: 70px;
        border-bottom: 1px solid #eee;
        position: relative;
        h5{
            display: inline-block;
            text-indent: 8px;
            border-left: 2px solid #88B7E0;
            margin: 8px 0;
            margin-right: 8px;
            vertical-align: top;
            .title{padding: 0 10px;}
            .btn-xs{
                font-size: 12px;
                padding: 2px 8px;
                height: 20px;
                line-height: 14px;
            }
        }
        .stayRight{
            position: absolute;
            top: 15px;
            right: 0;
            overflow: hidden;
        }
    }
}
.tableMain{
    padding: 10px;
}

.btn-toList{
  border: 1px solid #BBB;
  color: #666;
  text-shadow: none;
  vertical-align: middle;
  margin-top: 7px;
}

</style>


